<template>
  <div class="box-full overflow-hidden bgfff p-m">
    <a-table
      row-key="id"
      :columns="columns"
      :pagination="pagination"
      :data="tableData"
      :scroll="{ y: '100%', x: '100%' }"
      @pageChange="handlePageChange"
    >
      <template #amount="{ record }">
        <div :style="{ color: Number(record.amount) < 0 ? '#00b42a' : '#f53f3f' }">{{ record.amount }}</div>
      </template>
      <template #status="{ record }">
        <div class="flex-col flex-a-c">
          <a-tag :color="record.status == 1 ? '#f53f3f' : record.status == 2 ? '#00b42a' : '#86909c'">{{
            record.status == 1 ? '失败' : record.status == 2 ? '成功' : '--'
          }}</a-tag>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script setup>
import { withdrawalIncomeList } from '@/apis'
import { usePagination } from '@/hooks'
const props = defineProps(['userInfoData'])
const loading = ref(false)
const listParams = reactive({
  pageSize: 10,
  page: 1
})
const tableData = ref([])
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.pageSize })
const columns = [
  {
    title: '账单名称',
    dataIndex: 'typeName',
    with: 150
  },
  {
    title: '时间',
    dataIndex: 'date',
    align: 'center',
    with: 180
  },
  {
    title: '金额变动',
    slotName: 'amount',
    align: 'center',
    with: 120
  },
  {
    title: '状态',
    slotName: 'status',
    align: 'center',
    with: 120
  },
  {
    title: '备注',
    dataIndex: 'remark',
    with: 160
  }
]
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    const res = await withdrawalIncomeList(listParams)
    tableData.value = res.data.list
    setTotal(res.data?.pagination?.total ?? 0)
  } finally {
    loading.value = false
  }
}
getTableData()

const handlePageChange = (e) => {
  pagination.current = e
}
</script>
